<template>
  <div>
    <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
      <ImagePreview :imageList="imgList" />
      <BasicTable @register="registerTable">
        <template #chkresult="{ record, column }">
          <Tag v-if="1 == record[column.dataIndex]" color="green"> 通过 </Tag>
          <Tag v-else-if="0 == record[column.dataIndex]" color="red"> 不通过 </Tag>
          <Tag v-else>未核查</Tag>
        </template>

        <template #toolbar>
          <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
          <a-button type="primary" @click="handleReload"> 返回第一页 </a-button>
        </template>

        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'clarity:tree-view-line',
                tooltip: '查看详情',
                onClick: handleViewDetails.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </PageWrapper>
    <AuditModal @register="registerModal" @success="handleSuccess" />

    <Drawer5 @register="register5">
      <template #drawContent> <DetailView :hid="houseId" :checkForms="houseInfoForm" /> </template>
    </Drawer5>
  </div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, toRefs, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { getBasicColumns } from './tableData';
import { PageWrapper } from '/@/components/Page';
import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
import { houseCheckListApi, houseCheckApi } from '/@/api/demo/table';
import { useModal } from '/@/components/Modal';
import AuditModal from './AuditModal.vue';
import { useGlobSetting } from '/@/hooks/setting';
import { Tag } from 'ant-design-vue';
import { useDrawer } from '/@/components/Drawer';
import Drawer5 from '/@/views/detail/Drawer5.vue';

import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
const { info, success, warning, error } = createMessage;

const DetailView = defineAsyncComponent(() => import('./detail.vue'));
const globSetting = useGlobSetting();
const imgList: string[] = [];
export default defineComponent({
  name: 'HouseCheckInfo',
  components: {
    BasicTable,
    Drawer5,
    DetailView,
    PageWrapper,
    Tag,
    TableAction,
    AuditModal,
    ImagePreview,
  },
  props: {
    samplingId: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    function houseCheckListWithIDApi(...arg: any) {
      const { samplingId } = toRefs(props);
      return houseCheckListApi({ id: samplingId.value, ...arg[0] });
    }

    const [registerModal, { openModal }] = useModal();
    const [registerTable, { reload }] = useTable({
      title: '房屋核查情况',
      api: houseCheckListWithIDApi,
      columns: getBasicColumns(),
      pagination: { pageSize: 10 },
      bordered: true,

      actionColumn: {
        width: 120,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
    });

    function handleReloadCurrent() {
      reload();
    }

    const houseId = ref('');
    const houseInfoForm = ref({});
    const [register5, { openDrawer: openDrawer5, setDrawerProps }] = useDrawer();
    function handleViewDetails(record: Recordable) {
      houseId.value = record['id'];

      houseCheckApi({ id: houseId.value })
        .then((res) => {
          houseInfoForm.value = res;
          setDrawerProps({
            destroyOnClose: true,
            showDetailBack: false,
            afterVisibleChange: (visible: boolean) => {
              if (visible) {
              }
            },
          });
          openDrawer5(true);
        })
        .catch((err) => {
          error(err.message || '获取房屋信息失败');
        });
    }

    function handlePreview(record: Recordable) {
      const onImgLoad = ({ index, url, dom }) => {
        console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
      };
      imgList.length = 0;
      if (record.phid) {
        let photos = record.phid.split(',');
        photos.forEach((ele) => {
          if (ele) imgList.push(`${globSetting.apiBaseUrl}/api/v1/images/${ele}`);
        });
      }
      // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
      createImgPreview({ imageList: imgList, defaultWidth: 700, rememberState: true, onImgLoad });
    }

    function handleReload() {
      reload({
        page: 1,
      });
    }
    function handleSuccess() {
      reload();
    }
    return {
      imgList,
      registerModal,
      registerTable,
      handleViewDetails,
      handlePreview,
      handleReloadCurrent,
      handleReload,
      handleSuccess,
      register5,
      houseId,
      houseInfoForm,
    };
  },
});
</script>
